<template>
	<view class="history">
		<c-section title="设备列表(历史)" action="clear" @click="handleClear"></c-section>
		<view class="wrapper">
			<scroll-view :scroll-y="true" :style="{height: systemInfo.scrollHeight+'px'}">
				<c-list :dataArr="devices||[]" @click="handleClick"></c-list>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';

	export default {
		computed: {
			devices() {
				return this.$store.state.device.histories;
			},
			...mapGetters('system', ['systemInfo'])
		},
		methods: {
			handleClick(device) {
				uni.showModal({
					title: '系统提示',
					content: '选中设备[' + device.name + ']'
				});
			},
			handleClear() {
				this.clearHistory();
			},
			...mapMutations('device', ['clearHistory'])
		}
	}
</script>

<style lang="scss">
	.history {
		.wrapper {
			padding: 0 20rpx;
		}
	}
</style>
